<!-- FloatingIcon.vue -->
<template>
  <div class="floating-icon"
       :style="{ bottom: bottom + 'px', right: right + 'px' }"
       @click="router.push({ name:'add_activity'})">
    <Icon name="add" size="50" color="#5d9594"/>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Icon } from 'vant';
import router from "@/router";
const bottom = ref(58); // 默认距离底部的距离
const right = ref(8); // 默认距离右侧的距离

const handleClick = () => {
  // 处理点击事件，可以在这里添加具体的点击处理逻辑
  console.log('Floating icon clicked');
};
</script>

<style scoped>
.floating-icon {
  position: fixed; /* 使用 fixed 定位使其浮动在页面上 */
  cursor: pointer; /* 鼠标移上去显示手型 */
  z-index: 1000; /* 控制图标的层级，避免被其他元素遮挡 */
  border-color: white;
}
</style>